<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>PicBed admin</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script type="text/javascript" src="../lib/jquery/jquery-3.4.1.min.js"></script>
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="../js/common.js"></script>
    <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">图片管理</a>
            <a>
                <cite>用户图片列表</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
            onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
    </div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <form class="layui-form layui-col-space5" lay-filter="search">
                            <!-- <div class="layui-inline layui-show-xs-block">
                                <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
                            </div> -->
                            <div class="layui-inline layui-show-xs-block">
                                <input type="text" name="keywords" placeholder="图片sha值、文件名、mime" autocomplete="off"
                                    class="layui-input">
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <input type="text" name="username" placeholder="请输入完整用户名" autocomplete="on"
                                    class="layui-input">
                            </div>
                            <!-- <div class="layui-inline layui-show-xs-block">
                                <select name="status">
                                    <option value="0">-- 请选择应用状态 --</option>
                                    <option value="0">全部</option>
                                    <option value="1">审核中</option>
                                    <option value="2">正常</option>
                                    <option value="3">审核未通过</option>
                                    <option value="4">禁用</option>
                                </select>
                            </div> -->
                            <div class="layui-inline layui-show-xs-block">
                                <a class="layui-btn" id="search">
                                    <i class="layui-icon">&#xe615;</i>
                                    搜索
                                </a>
                            </div>
                        </form>
                    </div>
                    <div class="layui-card-header">
                        <button class="layui-btn layui-btn-danger" onclick="del_all()"><i
                                class="layui-icon"></i>批量删除</button>
                        <!-- <button class="layui-btn" onclick="xadmin.open('添加应用','./add.html',455,240)"><i
                                class="layui-icon"></i>添加</button> -->
                    </div>
                    <div class="layui-card-body layui-table-body layui-table-main">
                        <table class="layui-table layui-form" style="table-layout:fixed">
                            <col style="width:4%">
                            <col style="width:4%">
                            <col style="width:4%">
                            <col style="width:5%">
                            <col style="width:10%">
                            <col style="width:10%">
                            <col style="width:8%">
                            <col style="width:10%">
                            <col style="width:6%">
                            <col style="width:11%">
                            <col style="width:5%">
                            <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" lay-filter="checkall" name="" lay-skin="primary">
                                    </th>
                                    <th>id</th>
                                    <th>uid</th>
                                    <th>图片预览</th>
                                    <th>文件名</th>
                                    <th>URL</th>
                                    <th>MIME</th>
                                    <th>SHA_MD5值</th>
                                    <th>查看次数</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="table-guest-img">
                                <!-- <tr>
                                    <td>
                                        <input type="checkbox" name="id" value="${data.id}" lay-skin="primary">
                                    </td>
                                    <td>${data.id}</td>
                                    <td>${data.name}</td>
                                    <td>${data.icon}</td>
                                    <td>${status}</td>
                                    <td>${type}</td>
                                    <td>${created_at}</td>
                                    <td>${updated_at}</td>
                                    <td class="td-manage">
                                        <a onclick="guest-img_stop(this,${data.id})" href="javascript:;" title="启用">
                                            <i class="layui-icon">&#xe601;</i>
                                        </a>
                                        <a title="编辑" onclick="xadmin.open('编辑','guest-img-edit.html',600,400)"
                                            href="javascript:;">
                                            <i class="layui-icon">&#xe642;</i>
                                        </a>
                                        <a onclick="xadmin.open('修改密码','guest-img-password.html',600,400)" title="修改密码"
                                            href="javascript:;">
                                            <i class="layui-icon">&#xe631;</i>
                                        </a>
                                        <a title="删除" onclick="guest-img_del(this,${data.id})" href="javascript:;">
                                            <i class="layui-icon">&#xe640;</i>
                                        </a>
                                    </td>
                                </tr> -->

                            </tbody>
                        </table>
                    </div>
                    <div class="layui-card-body ">
                        <div class="page">
                            <div id="guest-img-page">
                                <!-- 分页容器 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var api_url = window.config.api_url;
    var laypage = null,
        form = null;

    layui.use(['laydate', 'form', 'laypage'], function () {
        var laydate = layui.laydate;
        // 赋值全局 form 对象
        form = layui.form;
        // 赋值全局分页器
        laypage = layui.laypage;

        request('/allimages', render_table, 1, 10, { type: 1 });

        // 监听全选
        form.on('checkbox(checkall)', function (data) {
            if (data.elem.checked) {
                $('tbody input').prop('checked', true);
            } else {
                $('tbody input').prop('checked', false);
            }
            form.render('checkbox');
        });
    });


    /**
     * @name: request
     * @msg: 获取并渲染列表数据
     * @param string url 请求地址（从模块开始）
     * @param function func 要调用的函数
     * @param integer curr 当前页码数
     * @param integer limit 每一页限制数据条数
     * @param jsonObject data 请求要传的数据
     * @return: 
     */
    function request(url, func, curr, limit, data = {}) {
        $.ajax({
            url: api_url + url + '?page=' + curr + '&limit=' + limit,
            method: 'get',
            dataType: 'json',
            processData: true,
            cache: false,
            data: data,
            headers: {
                token: window.config.token,
                rtime: window.func.getTime()
            },
            success: function (res) {
                func(res, curr, limit);
            },
            error: function () {
                window.func.error();
            }
        });
    }

    // 渲染表格
    var render_table = function (res, curr, limit) {
        if (!res.data.all) {
            window.func.nodata('table-guest-img', 11, res.code);
            form.render();
            layer.msg(res.msg, { time: 1000, icon: 2 });
            return null;
        }

        var data = res.data;
        var list = data.list,
            len = data.list.length,
            str = '';
        for (var i = 0; i < len; i++) {
            var created_at = window.func.date('Y-m-d H:i:s', list[i].created_at);

            str +=
                `<tr>
                    <td><input type="checkbox" name="id" value="${list[i].id}" lay-skin="primary"></td>
                    <td>${list[i].id}</td> 
                    <td>${list[i].uid}</td> 
                    <td>
                        <a href="javascript:;" onclick="show_img('${list[i].id}', '${list[i].filename}', '${list[i].url}')" title="查看大图">
                            <img src="${list[i].url}" style="width:40px;height:40px;" />
                        </a>
                    </td> 
                    <td>${list[i].filename}</td> 
                    <td style="white-space:nowrap; text-overflow: ellipsis; overflow: hidden;" title="${list[i].url}">${list[i].url}</td> 
                    <td>${list[i].mime}</td>
                    <td style="white-space:nowrap; text-overflow: ellipsis; overflow: hidden;" title="${list[i].sha_md5}">${list[i].sha_md5}</td>
                    <td>${list[i].views}</td>
                    <td>${created_at}</td> 
                    <td class="td-manage"> 
                        <a title="删除" onclick="img_del(this,${list[i].id})" href="javascript:;"> 
                            <i class="layui-icon">&#xe640;</i> 
                        </a> 
                    </td> 
                </tr>`;
        }

        $('#table-guest-img').html(str);
        form.render();

        //执行一个laypage实例
        laypage.render({
            elem: 'guest-img-page', //注意，这里是 ID，不用加 # 号
            count: data.all, //数据总数，从服务端得到
            curr: curr, // 当前页
            limit: limit, // 每页显示条数
            limits: [5, 10, 20, 30, 40, 50], // 每页限制条数选项
            layout: ['count', 'prev', 'page', 'next', 'limit'], // 排版
            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    //do something
                    request('/allimages', render_table, obj.curr, obj.limit, { type: 1 });
                }
            }
        });
    }

    /* 搜索 */
    $('#search').click(function () {
        var data = form.val('search');
        data.type = 1;
        request('/allimages', render_table, 1, 10, data);
    });


    /*应用-删除*/
    function img_del(obj, id) {

        layer.confirm('确认要删除吗？', {
            btn: ['确定', '取消']
        }, function (index) {
            //发异步删除数据
            delete_img(obj, id);
            layer.close(index);
        });
    }

    /* 批量删除 */
    function del_all() {
        var id = [];
        // 获取选中的id 
        $('tbody input').each(function (index, el) {
            if ($(this).prop('checked')) {
                id.push($(this).val())
            }
        });
        if (id.length == 0) {
            layer.msg('id不能为空', { time: 1000, icon: 2 });
            return false;
        }
        layer.confirm('确认要删除吗？' + id.toString(), function (index) {
            var obj = $(".layui-form-checked").not('.header');
            delete_img(obj, id);
            layer.close(index);
        });
    }


    /* 删除应用函数 */
    function delete_img(obj, id) {
        if (!id) {
            layer.msg('id不能为空', {
                icon: 2,
                time: 1000
            });
            return false;
        }
        $.ajax({
            url: api_url + '/imgdelete',
            method: 'post',
            data: {
                id: id, type: 1
            },
            dataType: 'json',
            processData: true,
            cache: false,
            headers: {
                token: window.config.token,
                rtime: window.func.getTime()
            },
            success: function (res) {
                if (res.code == 0) {
                    $(obj).parents("tr").remove();
                    layer.msg('已删除!', { icon: 1, time: 1000 });
                } else {
                    layer.msg(res.msg, { icon: 2, time: 1000 });
                }
            },
            error: function () {
                window.func.error();
            }
        });
    }


    function show_img(id, name, url) {
        layer.photos({
            photos: {
                "title": "", //相册标题
                "id": 1, //相册id
                "start": 0, //初始显示的图片序号，默认0
                "data": [   //相册包含的图片，数组格式
                    {
                        "alt": "filename",
                        "pid": id, //图片id
                        "src": url, //原图地址
                        "thumb": url //缩略图地址
                    }
                ]
            }

        });
    }


</script>

</html>